<template>
    <div class="m-style">
      <div class="style-list">
        <ul>
          <li class="list-li">
            <h3>1、半透明边框</h3>
            <div class="border-alpha">我是会变色的框</div>
          </li>
          <li class="list-li">
            <h3>2、多重边框</h3>
            <div class="multiple-border-shadow">我是shadow方案</div>
            <div class="multiple-border-outline">我是outline方案</div>
          </li>
          <li class="list-li">
            <h3>3、灵活的背景定位</h3>
            <div class="bc-position">我是一个灵活的背景图片</div>
          </li>
          <li class="list-li">
            <h3>4、边框内圆角</h3>
            <div class="box-fillet">我是一个有边框的内圆角</div>
          </li>
          <li class="list-li">
            <h3>5、复杂的渐变</h3>
            <div class="gradual-change-1 gradual-change"></div>
            <div class="gradual-change-2 gradual-change"></div>
            <div class="gradual-change-3 gradual-change"></div>
          </li>
          <li class="list-li">
            <h3>6、动画渐变</h3>
            <div class="animate-gradual">蚂蚁行军渐变框</div>
            <p>
              background: [background-color] [background-image] [background-repeat]
              [background-attachment] [background-position] / [ background-size]
              [background-origin] [background-clip];
            </p>
          </li>
          <li class="list-li">
            <h3>6、自适应的椭圆</h3>
            <div class="adaptive-ellipse-1 adaptive-ellipse">上半椭圆</div>
            <div class="adaptive-ellipse-2 adaptive-ellipse">左半椭圆</div>
            <div class="adaptive-ellipse-3 adaptive-ellipse">四分之一椭圆</div>
          </li>
          <li class="list-li">
            <h3>7、字体效果</h3>
            <span class="shine">我会发光</span>
          </li>
          <li class="list-li">
            <h3>8、优雅的滚动提示</h3>
            <div class="scroll-box">
              <ul>
                <li v-for="(list,index) in scroll_arr">{{list}}</li>
              </ul>
            </div>
          </li>
          <li class="list-li">
            <h3>9、当列表至少包含四项时</h3>
            <p>
              li:first-child:nth-last-child(n+4),
              li:first-child:nth-last-child(n+4) ~ li {
                  /* 当列表至少包含四项时，命中所有列表项 */
              }
            </p>
            <h3>9、当列表最多包含四项时</h3>
            <p>
              li:first-child:nth-last-child(-n+4),
              li:first-child:nth-last-child(-n+4) ~ li {
                  /* 当列表最多包含四项时，命中所有列表项 */
              }
            </p>
            <h3>9、当列表包含2～6项时</h3>
            <p>
              li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
              li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li {
                  /* 当列表包含2～6项时，命中所有列表项 */
              }
            </p>
          </li>
          <li class="list-li">
            <h3>10、自身选中加周转运动</h3>
            <div class="rotate-div">
              <span class="rotate-span"></span>
            </div>
          </li>
          <li class="list-li">
            <h3>11、扫码代码</h3>
            <div class="demo-change"></div>
          </li>
          <li class="list-li">
            <h3>12、基本3D变形，平行四边形</h3>
            <ul class="transform-3d-li">
              <li>
                <a href="#transform-3d-1" class="transform-3d" id="transform-3d-1">我是1</a>
              </li>
              <li>
                <a href="#transform-3d-2" class="transform-3d" id="transform-3d-2">我是2</a>
              </li>
              <li>
                <a href="#transform-3d-3" class="transform-3d" id="transform-3d-3">我是3</a>
              </li>
            </ul>
          </li>
          <li class="list-li">
            <h3>13、动态饼图</h3>
            <div class="pie"></div>
          </li>
        </ul>
      </div>
    </div>
</template>
<style lang="less" scoped>
  .m-style {
    overflow: auto;
    padding-bottom: 100px;
    box-sizing: border-box;
    height: 100%;
    .style-list {
      .list-li {
        padding: 10px;
        h3 {
          line-height: 40px;
        }
      }
    }
  }
</style>
<style lang="less" scoped>
  .border-alpha {
    width: 100px;
    height: 100px;
    border: 10px solid;
    background: #fff;
    background-clip: padding-box;
    transition: border-color .3s ease;
    color: #0F8EE9;
    &:hover {
      border-color: rgba(45,241,51,.6);
      /*border-color: hsla(0,0%,100%,.5);*/
    }
  }
  /*半透明边框*/
  .multiple-border-shadow {
    display: inline-block;
    margin: 20px;
    width: 100px;
    height: 100px;
    background: yellowgreen;
    box-shadow: 0 0 0 10px #655 inset,
                0 0 0 15px deeppink inset,
                1px 1px 40px 15px rgba(0, 0, 0, 0.6) inset;/*投影不受box-sizing影响*//*内多重边框阴影*/
    /*box-shadow: 0 0 0 10px #655,
    0 0 0 15px deeppink,
    1px 1px 40px 15px rgba(0, 0, 0, 0.6);*//*外多重边框阴影*/
  }
  /*多重边框box-shadow方案*/
  .multiple-border-outline {
    width: 100px;
    height: 100px;
    display: inline-block;
    background: yellowgreen;
    outline: 5px dashed deeppink;
    outline-offset: -10px;
  }
  /*outline只能实现一层*/
  .bc-position {
    width: 100px;
    text-align: center;
    padding: 10px;
    height: 100px;
    color: #000;
    background: #FFDEAD url('../../assets/image/logo.png') no-repeat bottom right / 80% 80%;
    background-position: right 20px bottom 10px;/*扩展以上写法*/
    /*background-position: calc(100% - 20px) calc(100% - 10px);*//*第二种扩展以上写法*/
    background-origin: content-box;/*根据盒模型中的那个框定位*/
  }
  /*背景图片灵活定位方法*/
  .box-fillet {
    width: 100px;
    height: 100px;
    font-size: 14px;
    background: tan;
    border-radius: .8em;
    padding: 1em;
    box-shadow: 0 0 0 .6em #655;
    outline: .6em solid #655;
  }
  /*边框的内圆角*/
  .gradual-change {
    width: 100px;
    height: 100px;
    display: inline-block;
  }
  /*渐变公共样式*/
  .gradual-change-1 {
    background: repeating-linear-gradient(45deg,#fb3, #58a 30px);
  }
  /*斜边径向渐变*/
  .gradual-change-2 {
    background: #58a;
    background-image: linear-gradient(white 2px, transparent 0),
                      linear-gradient(90deg, white 2px, transparent 0),
                      linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
                      linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,transparent 0);
    background-size: 75px 75px, 75px 75px,
                     15px 15px, 15px 15px;
  }
  /*蓝图网格图案*/
  .gradual-change-3 {
    background: #655;
    background-image: radial-gradient(tan 30%, transparent 0),
                      radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
  }
  /*波点图*/
  .adaptive-ellipse {
    width: 100px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    background-color: #0F8EE9;
  }
  /*椭圆公共样式*/
  .adaptive-ellipse-1 {
    border-radius: 50% e('/') 100% 100% 0 0;
  }
  /*上半椭圆*/
  .adaptive-ellipse-2 {
    border-radius: 100% 0 0 100% e('/') 50%;
  }
  /*左半椭圆*/
  .adaptive-ellipse-3 {
    border-radius: 50% / 100% 100% 0 0;
  }
  /*四分之一椭圆*/
  .shine {
    font-size: 40px;
    background: #203;
    color: #ffc;
    text-shadow: 0 0 .1em, 0 0 .3em;
    transition: text-shadow .6s ease;
    animation: shine 1.8s linear infinite alternate;
  }
  /*发光的文字*/
  .scroll-box {
    width: 150px;
    border: 1px solid #ccc;
    overflow: hidden;
    ul {
      width: 162px;
      height: 200px;
      overflow: auto;
      background: linear-gradient(white 30%,hsla(0,0%,100%,0)),
                  radial-gradient(at 50% 0, rgba(0,0,0,.2),transparent 70%),
                  linear-gradient(to top,white 30%,hsla(0,0%,100%,0)),
                  radial-gradient(at 50% 100%, rgba(0,0,0,.2),transparent 70%);
      background-repeat: no-repeat;
      background-size: 100% 50px,100% 15px,100% 50px,100% 15px;
      background-position: 0 0, 0 0,0 100%,0 100%;
      background-attachment: local, scroll, local, scroll;
    }
    li {
      line-height: 30px;
      padding-left: 10px;
    }
  }
  /*优雅的滚动提示*/
  /*@keyframes spin {
    from {
      transform:
        translate(0, 0)
        rotate(0turn)
        translate(0, 0);
    }
    to {
      transform:
        translate(0, 0)
        rotate(1turn)
        translate(0, 0);
    }
  }*/
  /*@keyframes spin-span {
    from {
      transform:
        translate(50%, 50%)
        rotate(1turn)
        translate(-50%, -50%);
    }
    to {
      transform:
        translate(50%, 50%)
        rotate(0turn)
        translate(-50%, -50%);
    }
  }*/
  @keyframes spin {
    from {
      transform:
        rotate(0turn)
        translateY(-80px)
        translateY(50%)
        rotate(1turn);
    }
    to {
      transform:
        rotate(1turn)
        translateY(-80px)
        translateY(50%)
        rotate(0turn);
    }
  }
  .rotate-div {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    padding: 10px;
    line-height: 200px;
    background-color: #0F8EE9;
    text-align: center;
    /*animation: spin 9s infinite linear;*/
    border-radius: 50%;
    .rotate-span {
      width: 30px;
      height: 30px;
      display: inline-block;
      text-align: center;
      border-radius: 50%;
      background: repeating-linear-gradient(red,blue);
      animation: spin 9s infinite linear;
      /*transform-origin: 0 0;*/
    }
  }
  /*自身旋转动画*/

  @keyframes scanCode {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(200px);
    }
  }
  .demo-change {
    width: 200px;
    height: 200px;
    position: relative;
    background: #fff;
    background-image:
      linear-gradient(green 2px,transparent 0,transparent 199px,green 0),
      linear-gradient(to right,green 2px,transparent 0,transparent 199px,green 0),
      linear-gradient(to left,green 2px,transparent 0,transparent 199px,green 0),
      linear-gradient(to top,green 2px,transparent 0,transparent 199px,green 0);
    background-size: 30px 200px,200px 30px, 200px 30px,30px 200px;
    background-position: 0 0, 100% 100%,0 0,100% 0;
    background-repeat: no-repeat;
    &::after {
       content: '';
       position: absolute;
       width: 100%;
       height: 1px;
       background: radial-gradient(at 50% 50%, rgba(0,128,0,1),transparent 70%);
       animation: scanCode 3s infinite linear;
    }
  }
  /*扫码样式*/
  .transform-3d-li {
    font-size: 0;
    li {
      display: inline-block;
    }
  }
  .transform-3d {
    display: inline-block;
    width: 80px;
    line-height: 30px;
    color: green;
    font-size: 12px;
    cursor: pointer;
    position: relative;
    text-align: center;
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: #ccc;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      border: 1px solid #ccc;
      border-bottom: none;
      z-index: -1;
      transform: scaleY(1.5) perspective(50px) rotateX(30deg);
      transform-origin: bottom;
      transition: transform .005s ease;
    }
  }
  #transform-3d-1:target,#transform-3d-2:target,#transform-3d-3:target {
    z-index: 2;
    &:target::before {
       transform: scale(1.2,1.5) perspective(50px) rotateX(30deg);
       background: #fff;
    }
  }
  /*基本3D变形，梯形*/
  @keyframes pie {
    to {
      transform: rotate(.5turn);
    }
  }
  @keyframes pie-bc {
    50% {
      background: radial-gradient(at 0% 50%,green,blue);
    }
    100% {
      background: radial-gradient(at 0% 50%,green,blue);
    }
  }
  .pie {
    width: 200px;
    height: 200px;
    background:
      linear-gradient(#ccc,#ccc) 0 0 e('/') 50% 100% no-repeat,
      radial-gradient(green,blue);
    overflow: hidden;
    border-radius: 50% e('/') 50%;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 50%;
      width: 50%;
      height: 100%;
      background: #ccc;
      border-radius: 0 100% 100% 0 e('/') 50%;
      transform-origin: 0 50%;
      animation: pie 4.5s linear infinite,pie-bc 9s step-end infinite;
      animation-fill-mode:forwards;
    }
  }
  /*动态饼图*/
</style>
<style>
  @keyframes ants { to { background-position: 100% 100% } }
  .animate-gradual {
    width: 100px;
    padding: 10px;
    height: 100px;
    padding: 1em;
    border: 1px solid transparent;
    background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 0 / 6px 6px;
    animation: ants 12s linear infinite;
  }
  /*蚂蚁行军渐变框动画*/
  @keyframes shine {
    to { text-shadow: 0 0 .6em, 0 0 .9em; }
  }
  /*发光文字的动画*/
</style>
<script>
  export default {
    name: 'm-style',
    data () {
      return {
        scroll_arr: [1,2,3,4,5,6,7,8,9,11,22,33,44],
        aa:{
          cc: '2'
        }
      }
    },
    mounted() {
      /*let a =[1,2,3,4];
      let mm = a.findIndex((n)=> {
        console.log(n)
        if(false){
          return true
        }
      })
      console.log(mm)*/
      /*let mm = [{aa:11}];
      let kk = mm;
      let cc = mm.map( (obj) => {
        let bb = {};
        Object.assign(bb,obj)
        return bb
      });
      cc[0].aa = 22;
      console.log(kk)*/
      /*let mm = [{cc: 'N'}];
      let bb = [{cc: 'N'}]
      console.log(mm[0].cc === bb[0].cc)*/
      let arr = [1,2,3,-6,1,9];
      function largestSum(arr){
        //最大子数组和
        var max = 0;
        //当前子数组和
        var cur = 0;
        for(var i=0;i<arr.length;i++){
          //当前子数组和为负数会影响下一项，所以重置0
          if(cur < 0){
            cur = 0;
          }
          cur += arr[i];
          if(cur > max){
            max = cur;
          }
        }
        return max;
      }
      console.log(largestSum(arr))
    }//原理:只要相加大于0就一直加
  }
</script>
